import React from 'react';
import { Form, Select, Radio, Button, Input, TreeSelect } from 'antd';

import styles from './AccountForm.scss';

class AccountForm extends React.Component {
  onChange = (value) => {
    // console.log(value);
    // this.setState({ value });
  };

  TreeSelectRender = (data, level, pcode) => {
    return data
      .filter(item => item.accLevel === level && item.code.substr(0, pcode.length) === pcode)
      .map((i, key) => {
        const { TreeNode } = TreeSelect.TreeNode;
        return (
          <TreeNode value={i.code} title={i.name} key={i.code}>
            {data.filter((item) => {
              return (
                item.accLevel === level + 1 && item.code.substr(0, item.code.length) === item.code
              );
            }).length === 0
              ? null
              : this.TreeSelectRender(data, level + 1, i.code)}
          </TreeNode>
        );
      });
  };

  render = () => {
    const { data, form } = this.props;
    const FormItem = Form.Item;
    const { Option } = Select.Option;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <React.Fragment>
        <Form onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="Parent Account">
            {getFieldDecorator('TreeSelect', {
              rules: [
                {
                  required: true,
                  message: 'Please input Account Name',
                },
              ],
            })(
              <TreeSelect
                showSearch
                style={{ width: 300 }}
                // value={this.state.value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="Please select"
                allowClear
                treeDefaultExpandAll
                onChange={this.onChange}
              >
                {this.TreeSelectRender(data, 1, 'ACC')}
              </TreeSelect>,
            )}
          </FormItem>

          <FormItem {...formItemLayout} label="Account Name">
            {getFieldDecorator('AccountName', {
              rules: [
                {
                  required: true,
                  message: 'Please input Account Name',
                },
              ],
            })(<Input placeholder="Please input Account Name" />)}
          </FormItem>
          <FormItem {...formItemLayout} label="Account Code">
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: 'Please input Account Code',
                },
              ],
            })(<Input placeholder="Please input Account Code" />)}
          </FormItem>
          <FormItem {...formItemLayout} label="Description">
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: 'Please input Description',
                },
              ],
            })(<Input placeholder="Please input Description" />)}
          </FormItem>

          <FormItem {...formItemLayout} label="Plain Text">
            <span className="ant-form-text">China</span>
          </FormItem>
          <FormItem {...formItemLayout} label="Smallist fration" hasFeedback>
            {getFieldDecorator('select', {
              rules: [{ required: true, message: 'Please select smallist fration!' }],
            })(
              <Select placeholder="Please Smallist fration" defaultValue="1/100">
                <Option value="1">1</Option>
                <Option value="1/10">1/10</Option>
                <Option value="1/100">1/100</Option>
                <Option value="1/1000">1/1000</Option>
                <Option value="1/10000">1/10000</Option>
                <Option value="1/100000">1/100000</Option>
              </Select>,
            )}
          </FormItem>

          <FormItem wrapperCol={{ span: 12, offset: 6 }}>
            <Button className={styles.submit_btn} type="primary" htmlType="submit">
              {'添加'}
            </Button>

            <Button className={styles.submit_btn} type="primary" htmlType="submit">
              {'删除'}
            </Button>

            <Button className={styles.submit_btn} type="primary" htmlType="submit">
              {'保存'}
            </Button>
          </FormItem>
        </Form>
      </React.Fragment>
    );
  };
}

export default Form.create()(AccountForm);
